<template>
	<view class="contain" :style="{'padding-top': statusBarHeight}">
		
		<div class="row_between head_wrap" @click="closeLogin">
			<image src="../../static/img/close_icon.png" mode="aspectFill" />
		</div>
		
		<div class="login_text">设置密码</div>
		<!-- pattern="\d*" -->
		<div class="login_wrap">
			<div class="row_wrap">
				<div class="row">

					<input type="password" placeholder="输入新密码(最少6位)" focus placeholder-class="place-holder" pattern="\d*"
						 class="password1" v-model="password1" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar">
				</div>
			</div>
			<div class="row_wrap" style="margin-bottom: 19upx;">
				<div class="row">
			
					<input type="password" placeholder="再次确认新密码" focus placeholder-class="place-holder" pattern="\d*"
						class="password2" v-model="password2" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar">
				</div>
			</div>
			
		</div>
		<div class="to_code_wrap">密码不少于6位，至少包含字母/数字/字符2种组合</div>
		<div type="button" class="button" :class="{'input_active': btnActive}" :loading="isShowLoading"
			@click="saveAction">保存</div>
		<div class="flex_one col">
			<div class="flex_one"></div>
			
			<div class="row_center bottom_wrap" :style="{'visibility': (tabbar?'visible':'hidden')}">
				<image src="../../static/img/logo_text.png" mode="widthFix"></image>
			</div>
		</div>
		
		
	</view>
</template>

<script>
	import { BASE_IMAGE_URL,sendCode } from '@/utils/api'
	import {igexinTool} from '../../utils/geTuiTool.js'
	
	export default {
		data() {
			return {
				statusBarHeight: 0,
				account: '',
				password1:'',
				password2:'',
				isShowInputClose: false,
				btnActive: false,
				isShowLoading: false,
				tabbar: true,
				windowHeight: '',
				url: '',
				flag:1,
				showPassword: true,
				imageUrl:"/static/img/show_pwd.png"
			};
		},
		watch:{
			password2(){
				this.changeInput();
			}
		},
		methods:{
			showTabbar(){
				this.changeTabBar(true);
			},
			hideTabbar(){
				this.tabbar = false;
				// if(this.flag)
				// {
				// 	this.flag=0;
				// 	uni.hideKeyboard();
				// }
				this.$forceUpdate();
			},
			clearInput(){
				this.account = "";
				this.btnActive = false;
				this.$forceUpdate();
			},
			closeLogin: function(){
				uni.navigateBack({
					delta: 1
				});
			},
			changeInput(){
				if(this.password1 && this.password2){
					this.isShowInputClose = true;
					if(this.password1.length == this.password2.length){
						this.btnActive = true;
					}else{
						this.btnActive = false;
					}
				}else{
					this.isShowInputClose = false;
					this.btnActive = false;
				}
				this.$forceUpdate();
			},
			async saveAction(){
				if(!this.btnActive){
					return;
				}
				if(this.password1!=this.password2){
					uni.showToast({
					  icon: 'none',
					  title: '两次密码输入不一致',
					  duration: 1000
					});
					return;
				}
				if(!(/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/.test(this.password1))){
					uni.showToast({
					  icon: 'none',
					  title: '密码不少于6位，至少包含字母/数字/字符2种组合',
					  duration: 1000
					});
					return;
				};
				this.btnActive =false;
				this.isShowLoading = true;
				
				let res = await savepwd(this.account, this.password1);
				if(res.code == 1){
					uni.showToast({
					  icon: 'none',
					  title: '密码设置成功',
					  duration: 1000
					});
					let platform =uni.getSystemInfoSync().platform;
					uni.setStorageSync("auth_token", res.data);
					
					uni.setStorageSync("tpjk_app_version", "IOS_1.0.0");
					
					// #ifdef APP-PLUS
						plus.navigator.setCookie(BASE_URL, 'auth_token='+res.data+";expires=Friday,24-Jan-3014 16:24:36 GMT");
						plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo){  
							console.log(wgtinfo.version);  
							if(platform == "android"){
								uni.setStorageSync("tpjk_app_version", "ANDROID_"+wgtinfo.version);
								plus.navigator.setCookie(BASE_URL, "tpjk_app_version=ANDROID_"+wgtinfo.version);
							}else{
								uni.setStorageSync("tpjk_app_version", "IOS_"+wgtinfo.version);
								plus.navigator.setCookie(BASE_URL, "tpjk_app_version=IOS_"+wgtinfo.version);
							}
						});
						
					// #endif
					
					setTimeout(() => {
						console.log(this.url);
						if(this.url && (this.url.indexOf("http") != -1)){
							uni.navigateBack({
								delta: 3
							});
							uni.navigateTo({
								url:'/pages/login_webview/login_webview?url='+this.url
							})
						}else{
							uni.navigateBack({
								delta: 2
							});
						}
						
					}, 1000);
					
				}else{
					uni.showToast({
					  icon: 'none',
					  title: res.message,
					  duration: 1000
					});
					this.btnActive =true;
					this.isShowLoading = false;
				}
			},
			toCodeLogin(){
				uni.navigateBack({})
			},
			getPwd(){
				uni.navigateTo({
					url:'../reset_pwd/reset_pwd'
				})
			},
			changeTabBar(value){
				setTimeout(()=>{
					this.tabbar = value;
					this.$forceUpdate();
				}, 100);
			},
			changePassword: function(e) {
				this.showPassword = !this.showPassword;
				console.log(e.currentTarge);
				if(this.showPassword){
					this.imageUrl='/static/img/show_pwd.png'
				}else{
					this.imageUrl='/static/img/hidden_pwd.png'
				}
				
			}
		},
		onLoad(opt) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			let phone = opt.account;
			this.account=phone;
			uni.getSystemInfo({
		        success: (res)=> {
		            this.windowHeight = res.windowHeight;
		        }
		    });
			
			setTimeout(()=> {
				uni.onWindowResize((res) => {
					console.log(res.size.windowHeight);
					console.log(this.windowHeight);
			        if(res.size.windowHeight < this.windowHeight){
			            this.hideTabbar();
			        }else{
			            this.changeTabBar(true);
			        }
			    })
			},2000) 
			this.url = opt.url;
		    console.log(this.url);
			if(this.url){
				uni.setStorageSync("login_url", this.url);
			}
		}
	}
</script>

<style lang="scss">
	input{width: 100%;}
	.contain{width: 100%; height: 95vh; display: flex;flex-direction: column;}
	.head_wrap{position: relative;}
	.head_wrap image{width:48upx;height: 48upx;position: absolute;right: 20upx; top: 20upx;}
	.login_text{color: #333333; font-size: 40upx; margin-top: 182upx; font-weight: bold;text-align: center;}
	.mobile{height: 48upx;}
	.input_active{background-color: #FFCA0A!important;}
			.logo_wrap{
				margin: 80upx auto 100upx;
				text-align: center;
			}
			
			.login_wrap{
				padding: 0upx 67upx;
				margin-top: 120upx;
			}
			
			.row_wrap{border-bottom: 2upx solid #E3E3E3;}
			.row_wrap image{width: 48upx; height: 48upx;}
			
			.login_wrap div{
				
				padding: 0upx 8upx;
				margin-bottom: 30upx;
			}
			
			.login_wrap input{
				margin-bottom: 0upx;
				border: none;
				background: transparent;
			}
			
			::-webkit-input-placeholder{
				color: #999999;
				font-size: 28upx;
			}
			
			.bottom_wrap{ margin-bottom: 132upx; width: 100%;}
			.bottom_wrap image{width: 305upx;}
			
			.button{
				border-radius: 16upx;
				margin: 61upx 65upx 0upx;
				box-sizing: border-box;
				background-color: #CCCCCC;
				color: #303030;
				font-size: 36upx;
				height: 94upx;
				line-height: 94upx;
				text-align: center;
				font-weight: bold;
				border: solid #F2F2F2 1upx;
			}
			uni-button:after{border: none!important;}
			
			.to_code_wrap{
				margin: 0upx 65upx;
				text-align: center;
				color: #666666;
				font-size: 26upx;
			}
			
</style>
